<template>
   <div class="fots">
        <div class="items" @click="goRouter('/home')">
             <img :src='$route.path.includes("/home") ? Bars[0].selected : Bars[0].active ' />
             <p :class="{actived:$route.path.includes('/home')}">首页</p>
        </div>
        <div class="items" @click="goRouter('/recommend')">
             <img :src=' "/recommend" === $route.path ?  Bars[1].selected :  Bars[1].active ' />
             <p :class='{actived: "/recommend" === $route.path  }'>推荐</p>
        </div>
        <div class="items" @click="goRouter('/search')">
             <img :src=' "/search" === $route.path ?  Bars[2].selected :  Bars[2].active ' />
             <p :class='{actived: "/search" === $route.path  }'>搜索</p>
        </div>
        <div class="items" @click="goRouter('/chat')">
             <img :src=' "/chat" === $route.path ?  Bars[3].selected :  Bars[3].active ' />
             <p :class='{actived: "/chat" === $route.path  }'>聊天</p>
        </div>
        <div class="items" @click="goRouter('/mine')">
             <img :src=' "/mine" === $route.path ?  Bars[4].selected :  Bars[4].active ' />
             <p :class='{actived: "/mine" === $route.path  }'>个人中心</p>
        </div>
   </div>
</template>
<script>
export default {
    props:{

    },
    components:{

    },
    data(){
        return {
             Bars:[
                {
					ative:'static/img/1.png',
					selected:"static/img/2.png"
                },
                {
					ative:'static/img/3.png',
					selected:"static/img/4.png"
                },
                {
					ative:'static/img/5.png',
					selected:"static/img/6.png"
                },
                {
					ative:'static/img/1.png',
					selected:"static/img/2.png"
                },
                {
					ative:'static/img/1.png',
					selected:"static/img/2.png"
                }
             ]
        }
    },
    computed:{

    },
    methods:{
       goRouter(path){
             this.$router.replace(path);
       }
    },
    created(){

    },
    mounted(){

    }
}
</script>
<style scoped lang="scss">
@import "~@/scss/common.scss";
.fots{
    width:100%;
    height:pxTorem(50px);
    display:flex;
    justify-content:space-around;
    align-items:center;
    border-top:2px solid #ccc;
    background:skyblue;
    .items{
        width:20%;
        text-align: center;
        img{
            width:pxTorem(24px);
            height:pxTorem(24px);
        }
        p{
            font-size:pxTorem(13px);
        }
        .actived{
             color:red;
        }
    }
}
</style>